<template>
  <f7-page>
    <f7-navbar>
      <f7-nav-left>
        <f7-link icon-if-ios="f7:gear" icon-if-md="material:menu" panel-open="left"></f7-link>
      </f7-nav-left>
      <f7-nav-title>My App</f7-nav-title>
    </f7-navbar>
    <f7-block>
      <div v-if="$store.state.menuList" v-for="itemMenu in $store.state.menuList" :key="itemMenu.id">
        <f7-block-title>{{itemMenu.text}}</f7-block-title>
        <div class="nine-group">
          <template v-for="item in $store.state.navigateTreeData[itemMenu.id]">
            <div class="item" v-for="itemChildren in item.children">
              <div class="cnt" @click="itemClick(itemChildren)">
                <i class="avatar" :class="itemChildren.iconCls"></i>
                <div class="text">{{itemChildren.text}}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </f7-block>
  </f7-page>
</template>
<script>
  import Cache from '@/common/cache'

  export default {
    methods: {
      itemClick(item) {
        // this.
        // ${itemMenu.id}_${item.id}
        console.log('item', item.routeId)
        this.$f7router.navigate('/main/' + item.routeId)
      },
      getDict(idx, callback) {
        this.name = this.items[idx]
        console.log('this.name', this.name)
        if (this.name) {
          const DictURL = `/camel/rest/system/applications`
          const DictKey = `${this.name.toUpperCase()}-DICT-KEY`
          let _dict = Cache.get(DictKey)
          if (!_dict) {
            const data = {
              page: 1,
              start: 0,
              limit: 200,
              sort: '[{\'property\': \'value\', \'direction\': \'ASC\'}]'
            }
            this.axios.get(DictURL, {params: data})
              .then(response => {
                console.log('response', response)
                if (response.data) {
                  Cache.save(DictKey, JSON.stringify(response.data))
                  this.getDict(idx++, callback)
                } else {
                  callback()
                }
              })
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    },
    mounted() {
      // console.log(this.$store.state.menuList)
      if (this.$store.state.menuList) {
        this.items = []
        this.$store.state.menuList.forEach(item => {
          console.log('item', item.id)
          this.items.push(item.id)
        })
        this.getDict(0, () => {
          console.log('END')
        })

      }
    }
  }
</script>
<style lang="stylus">
  .nine-group
    display flex
    flex-wrap wrap
    border 1px solid rgba(204, 204, 204, .7)
    background-color #ffffff
    .item
      width 33.33%
      text-align center
      position relative
      &:after
        padding-top 100%
        display block
        content ''
      .cnt
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        display flex
        flex-direction column
        align-items center
        justify-content center
        color #333333
        .avatar
          font-size 26px
        .text
          font-size 12px
          margin-top 8px
</style>
